<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>01_天气案例</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="demo">
    <h1>今天天气很{{getWether}}</h1>
    <img :src='url' style="width: 300px;">
    <button @click="changeWether">切换天气</button>
  </div>
</body>

<script type="text/javascript">

  new Vue({
    el: '#demo',
    data() {
      return {
        // 天气数据
        TianQ: true,
        // 图片数据
        url: 'https://img0.baidu.com/it/u=2359130310,811924722&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
      }
    },
    methods: {
      changeWether() {
        this.TianQ = !this.TianQ
      }
    },
    computed: {
      getWether() {
        return this.TianQ ? '炎热' : '凉爽'
      }

    },
    watch: {
      TianQ: {
        handler(value) {
          if (value) {
            this.url = 'https://img0.baidu.com/it/u=2359130310,811924722&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
          } else {
            this.url = 'https://img0.baidu.com/it/u=2321712449,2208831346&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
          }
        }
      }
    }
  })
</script>

</html>